<template>
  <view class="demand-list-container">
    <!-- 导航栏 -->
  

    <!-- 筛选栏 -->
    

    <!-- 需求列表 -->
    <view class="demand-list">
      <!-- 加载状态 -->
      <view v-if="loading && demandList.length === 0" class="loading-container">
        <u-loading-page 
          loading-text="加载中..." 
          font-size="16"
          loading-color="#5daf34"
        ></u-loading-page>
      </view>

      <!-- 空状态 -->
      <view v-else-if="!loading && demandList.length === 0" class="empty-container">
        <u-empty 
          text="暂无需求信息"
          icon="order"
          icon-color="#5daf34"
          text-color="#999"
        ></u-empty>
      </view>

      <!-- 需求列表 -->
      <view v-else>
        <view 
          class="demand-item card"
          v-for="demand in demandList"
          :key="demand.id"
          @click="goToDetail(demand.id)"
        >
          <view class="demand-header">
            <view class="demand-title">{{ demand.title }}</view>
            <view class="demand-status" :class="[
              demand.status === 'PUBLISHED' ? 'status-published' : '',
              demand.status === 'MATCHED' ? 'status-matched' : '',
              demand.status === 'CLOSED' ? 'status-closed' : '',
              demand.status === 'EXPIRED' ? 'status-expired' : ''
            ]">
              {{ getStatusText(demand.status) }}
            </view>
          </view>
          
          <view class="demand-content" v-if="demand.contentMd">
            {{ demand.contentMd }}
          </view>
          
          <view class="demand-meta">
            <view class="meta-item">
              <u-icon name="grid-fill" size="28" color="#666"></u-icon>
              <text class="meta-text">{{ demand.subject }}</text>
            </view>
            <view class="meta-item" v-if="demand.grade">
              <u-icon name="grid-fill" size="28" color="#666"></u-icon>
              <text class="meta-text">{{ demand.grade }}</text>
            </view>
            <view class="meta-item" v-if="demand.teachingType">
              <u-icon name="grid-fill" size="28" color="#666"></u-icon>
              <text class="meta-text">{{ getTeachingTypeText(demand.teachingType) }}</text>
            </view>
          </view>

          <view class="demand-footer">
            <view class="demand-stats">
              <text class="stats-text">
                <u-icon name="eye" size="12" color="#999"></u-icon>
                {{ demand.viewCount || 0 }}
              </text>
              <text class="stats-text">
                <u-icon name="chat" size="12" color="#999"></u-icon>
                {{ demand.replyCount || 0 }}
              </text>
            </view>
            <view class="demand-budget" v-if="demand.budgetMin || demand.budgetMax">
              <text class="budget-text">
                ¥{{ formatBudget(demand.budgetMin, demand.budgetMax) }}/时
              </text>
            </view>
          </view>

          <view class="demand-time">
            <u-icon name="clock" size="12" color="#ccc"></u-icon>
            <text class="time-text">{{ formatTime(demand.createdAt) }}</text>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMore" class="load-more" @click="loadMore">
          <u-loading-icon v-if="loadingMore" mode="flower"></u-loading-icon>
          <text>{{ loadingMore ? '加载中...' : '加载更多' }}</text>
        </view>
        
        <!-- 没有更多 -->
        <view v-else-if="demandList.length > 0" class="no-more">
          <text>没有更多了</text>
        </view>
      </view>
    </view>

    <!-- 浮动发布按钮 -->
    <view class="fab-button" @click="goToPublish">
      <view class="fab-content">
        <view class="fab-icon">
          <u-icon name="plus" size="32" color="#fff"></u-icon>
        </view>
        <text class="fab-text">发布需求</text>
        <view class="fab-ripple"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDemandPage } from '@/api/demand'

export default {
  data() {
    return {
      demandList: [],
      loading: false,
      loadingMore: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 10,
      
      // 筛选相关
      filterTabs: [
        { name: '全部' },
        { name: '数学' },
        { name: '英语' },
        { name: '语文' },
        { name: '物理' },
        { name: '化学' }
      ],
      currentFilter: 0,
      currentSubject: ''
    }
  },

  onLoad() {
    this.loadDemandList(true)
  },

  onReachBottom() {
    if (this.hasMore && !this.loadingMore) {
      this.loadMore()
    }
  },

  onPullDownRefresh() {
    this.loadDemandList(true)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  
  methods: {
    // 加载需求列表
    async loadDemandList(refresh = false) {
      if (refresh) {
        this.currentPage = 1
        this.hasMore = true
        this.demandList = []
      }

      try {
        this.loading = refresh
        this.loadingMore = !refresh
        
        const params = {
          current: this.currentPage,
          size: this.pageSize
        }
        
        if (this.currentSubject) {
          params.subject = this.currentSubject
        }

        const res = await getDemandPage(params)
        if (res.code === 200) {
          const newList = res.data.records || []
          
          if (refresh) {
            this.demandList = newList
          } else {
            this.demandList.push(...newList)
          }
          
          this.hasMore = newList.length === this.pageSize
          if (this.hasMore) {
            this.currentPage++
          }
        } else {
          uni.showToast({
            title: res.message || '加载失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('加载需求列表失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'error'
        })
      } finally {
        this.loading = false
        this.loadingMore = false
      }
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loadingMore) {
        this.loadDemandList(false)
      }
    },

    // 筛选切换
    handleFilterChange(index) {
      this.currentFilter = index
      if (index === 0) {
        this.currentSubject = ''
      } else {
        this.currentSubject = this.filterTabs[index].name
      }
      this.loadDemandList(true)
    },

    // 跳转详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/demand/detail?id=${id}`
      })
    },

    // 跳转发布页面
    goToPublish() {
      uni.navigateTo({
        url: '/pages/demand/publish'
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'PUBLISHED': '已发布',
        'MATCHED': '已匹配',
        'CLOSED': '已关闭',
        'EXPIRED': '已过期'
      }
      return statusMap[status] || status
    },



    // 获取授课方式文本
    getTeachingTypeText(type) {
      const typeMap = {
        'ONLINE': '线上',
        'OFFLINE': '线下',
        'BOTH': '线上线下'
      }
      return typeMap[type] || type
    },

    // 格式化预算
    formatBudget(min, max) {
      if (min && max) {
        return `${min}-${max}`
      } else if (min) {
        return `${min}起`
      } else if (max) {
        return `${max}内`
      }
      return '面议'
    },

    formatTime(time) {
      if (!time) return ''
      const now = new Date()
      const target = new Date(time)
      const diff = now - target
      
      if (diff < 60000) {
        return '刚刚'
      } else if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      } else {
        return target.toLocaleDateString()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.demand-list-container {
  min-height: 100vh;
}

.filter-bar {
  padding: 20rpx;
  background: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.demand-list {
  // margin-top: 100rpx;
  padding: 20rpx;
}

.loading-container, .empty-container {
  padding: 100rpx 0;
}

.demand-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.demand-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.demand-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
  line-height: 1.4;
}

.demand-status {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
  flex-shrink: 0;
  
  &.status-published {
    background: #f6ffed;
    color: #52c41a;
    border: 1rpx solid #b7eb8f;
  }
  
  &.status-matched {
    background: #fff7e6;
    color: #fa8c16;
    border: 1rpx solid #ffd591;
  }
  
  &.status-closed, &.status-expired {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1rpx solid #ffccc7;
  }
}

.demand-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.demand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 4rpx 12rpx;
  background: #f8f9fa;
  border-radius: 20rpx;
}

.meta-text {
  font-size: 24rpx;
  color: #666;
}

.demand-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.demand-stats {
  display: flex;
  gap: 20rpx;
}

.stats-text {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 24rpx;
  color: #999;
}

.demand-budget {
  flex-shrink: 0;
}

.budget-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #5daf34;
}

.demand-time {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.time-text {
  font-size: 22rpx;
  color: #ccc;
}

.load-more, .no-more {
  text-align: center;
  padding: 40rpx;
  font-size: 28rpx;
  color: #999;
}

.load-more {
  cursor: pointer;
}

/* 浮动发布按钮 */
.fab-button {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  z-index: 999;
  animation: fabSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-content {
  position: relative;
  background: linear-gradient(135deg, #3cc51f 0%, #2ea516 100%);
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  box-shadow: 0 12rpx 32rpx rgba(60, 197, 31, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

  &:active {
    transform: scale(0.92);
    box-shadow: 0 6rpx 20rpx rgba(60, 197, 31, 0.3);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border-radius: 70rpx;
    pointer-events: none;
  }
}

.fab-icon {
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}

.fab-text {
  color: #fff;
  font-size: 20rpx;
  font-weight: 600;
  letter-spacing: 0.5rpx;
  position: relative;
  z-index: 2;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.fab-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200rpx;
    height: 200rpx;
    opacity: 0;
  }
}

@keyframes fabSlideIn {
  from {
    opacity: 0;
    transform: translateY(100rpx) scale(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 添加呼吸动画 */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 12rpx 32rpx rgba(60, 197, 31, 0.4);
  }
  50% {
    box-shadow: 0 12rpx 40rpx rgba(60, 197, 31, 0.6);
  }
}

.fab-content {
  animation: pulse 2s ease-in-out infinite;
}
</style> 